<script setup lang="ts">
import image6 from '../assets/106孙中山先生.jpg'
import image1 from '../assets/107毛泽东主席.jpg'
import image2 from '../assets/108周恩来总理.jpg'
import image3 from '../assets/109叶挺将军.jpg'
import image4 from '../assets/110陈独秀.jpg'
import image5 from '../assets/111李大钊.jpg'

const people = [
  { name: '毛泽东', img: image1 },
  { name: '周恩来', img: image2 },
  { name: '叶挺', img: image3 },
  { name: '陈独秀', img: image4 },
  { name: '李大钊', img: image5 },
  { name: '孙中山', img: image6 }
]
</script>

<template>
  <div class="my-area my-row">
    <!--时间编年史-->
    <div class="my-area my-col-md-12">
      <div style="position: relative">
        <h4 class="title">人物传记</h4>
        <a href="/biography" class="note">
          <h4>了解更多</h4>
        </a>
      </div>
      <hr class="connected-hr" />
      <!--大文章部分-->
      <div class="my-container" style="height: 100%; overflow: hidden">
        <div class="my-area my-row">
          <div style="display: flex; margin: 30px 0" class="my-col-md-12">
            <!--介绍-->
            <div class="my-col-md-12 photo_border" style="margin: 10px 30px; white-space: nowrap">
              <div
                class="my-col-md-2 photo image-container slide-animation"
                v-for="(person, index) in people"
                :key="index"
                style="margin: 10px 40px">
                <a href="#">
                  <img :src="person.img" style="width: 100%; height: auto" />
                </a>
                <h4 style="text-align: center" class="text-overlay">{{ person.name }}</h4>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style>
@import '@/modules/moules1/modules1_BigRevelution/assets/main.css';
</style>
<style scoped>
@keyframes slide {
  0% {
    transform: translateX(1000%);
  }
  100% {
    transform: translateX(-1000%);
  }
}

.image-container {
  display: inline-block;
  vertical-align: top;
}

.slide-animation {
  animation: slide 15s linear infinite;
}

/* 了解更多 */
.note {
  display: inline-block;
  color: #d3d3d3;
  font-weight: lighter;
  position: absolute;
  right: 0;
}
.note:hover {
  color: black;
}
/* 文字 */
.text-overlay {
  color: black;
}

/*照片框*/
.photo_border {
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  display: flex;
  height: 100%;
}

.photo {
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease-in-out;
  transform: translateY(0);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

.photo:hover {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  transform: translateY(-10px);
}

.border {
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease-in-out;
  transform: translateY(0);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  margin: 10px 0;
}

/* 标题 */
.title {
  background-color: red;
  color: white;
  border-top-right-radius: 10px;
  box-sizing: border-box;
  display: inline-block;
  padding: 5px 10px;
  margin: 2px 0px;
}
</style>
